<template>
  <div class="card">
    <div class="card-top-border"></div>
    <slot />
    <div class="card-bottom-border"></div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Card",
});
</script>

<style scoped lang="scss">
.card {
  width: 100%;
  height: 170px;
  background-image: url("@/assets/line.png");
  border: 1px solid $border-color-1;
  position: relative;
}

@mixin border($position1, $position2) {
  content: "";
  position: absolute;
  #{$position1}: 0;
  #{$position2}: 0;
  width: 10px;
  height: 10px;
  border-#{$position1}: 1px solid $border-color-2;
  border-#{$position2}: 1px solid $border-color-2;
}

.card-top-border {
  position: relative;
  &::before {
    @include border(top, left);
  }
  &::after {
    @include border(top, right);
  }
}

.card-bottom-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  &::before {
    @include border(bottom, left);
  }
  &::after {
    @include border(bottom, right);
  }
}

// .card-top-border {
//   position: relative;
//   &::before {
//     content: "";
//     position: absolute;
//     left: 0;
//     top: 0;
//     width: 10px;
//     height: 10px;
//     border-top: 1px solid $border-color-2;
//     border-left: 1px solid $border-color-2;
//   }
//   &::after {
//     content: "";
//     position: absolute;
//     right: 0;
//     top: 0;
//     width: 10px;
//     height: 10px;
//     border-right: 1px solid $border-color-2;
//     border-top: 1px solid $border-color-2;
//   }
// }

// .card-bottom-border {
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   width: 100%;
//   &::before {
//     content: "";
//     position: absolute;
//     left: 0;
//     bottom: 0;
//     width: 10px;
//     height: 10px;
//     border-bottom: 1px solid $border-color-2;
//     border-left: 1px solid $border-color-2;
//   }
//   &::after {
//     content: "";
//     position: absolute;
//     right: 0;
//     bottom: 0;
//     width: 10px;
//     height: 10px;
//     border-right: 1px solid $border-color-2;
//     border-bottom: 1px solid $border-color-2;
//   }
// }
</style>
